<!--
 * @Description: 
 * @Date: 2020-12-15 14:22:24
 * @LastEditors: lother
 * @LastEditTime: 2021-01-09 15:45:16
 * @FilePath: \AccountOpening-H5\src\views\mainlandCard\index.vue
-->
<template>
    <div>
        <l-header></l-header>
        <div class="w89">
            <h2 class="title">{{$t('mainlandCard.index.5636kbuckxk0')}}</h2>
            <h3 class="title_msg">{{$t('mainlandCard.index.5636kbucm880')}}</h3>
            <ul class="cardList">
                <li>
                    <van-uploader result-type="file" :after-read="afterRead" capture  :disabled="cardZShow" />
                    <div class="por">
                        <img :src="form.frontImg?form.frontImg:require('@/assets/img/cardz.png')" alt="" >
                    </div>
                    <div class="cardBT">
                        {{$t('mainlandCard.index.5636kbucmio0')}}
                    </div>
                    <van-loading :color="color" v-show="cardZShow" />
                </li>
                <li>
                    <van-uploader  result-type="file"  :after-read="afterReadF" capture  :disabled="cardFShow" />
                    <div class="por">
                        <img :src="form.backImg?form.backImg:require('@/assets/img/cardf.png')" alt="">
                    </div>
                    <div class="cardBT">
                        {{$t('mainlandCard.index.5636kbucmrg0')}}
                    </div>
                    <van-loading :color="color" v-show="cardFShow" />

                </li>
            </ul>
            <div class="errsfz" :class="form.frontImg || form.backImg ?'on':''">
                <h2>{{$t('mainlandCard.index.5636kbucmzk0')}}</h2>
                <p>1.{{$t('mainlandCard.index.5636kngiy080')}}</p>
                <p>2.{{$t('mainlandCard.index.5636kngizc80')}}<span>{{$t('mainlandCard.index.5636kbucna00')}}</span></p>
                <p>
                    <img src="@/assets/img/errfz_en.png" alt="" v-if="langSuff=='en'">
                    <img src="@/assets/img/errfz_tc.png" alt="" v-else-if="langSuff=='tc'">
                    <img src="@/assets/img/errsfz.png" alt="" v-else>
                </p>
            </div>
            <van-form validate-first  scroll-to-error validate-trigger='onChange' ref="form" @submit="submitList">
                <div class="card" :class="form.frontImg?'on':''">
                    <h2 class="title">{{$t('mainlandCard.index.5636kbucnio0')}}</h2>
                    <h3 class="title_msg">{{$t('mainlandCard.index.5636kbucnrc0')}} </h3>
                        <div v-for="(item,index) in cardpor" :key="index">
                            <k-input :val.sync="front[item.name]" :list="item" v-if="item.type=='input'"/>
                            <k-date :val.sync="front[item.name]" :list="item" v-if="item.type=='date'" />
                        </div>
                </div>
                <div class="card" :class="form.backImg?'on':''">
                    <h2 class="title">{{$t('mainlandCard.index.5636kbucnzo0')}}</h2>
                        <div v-for="(item,index) in cardSide" :key="index">
                            <k-input :val.sync="back[item.name]" :list="item" />
                        </div>
                </div>
            </van-form>
            <van-button type="info" block class="next-step"  @click="submit" :loading="loading">{{$t('documentType.index.5636jiatocw0')}}</van-button>
        </div>
    </div>
</template>
<script>
import { fff } from '@/assets/less/global.less'
import { uploads , analyse , submitList} from '@/api/common'
export default {
    inject: ['StepsPage','user_fill'],
    data() {
        return {
            form:{
                frontImg:"",
                backImg:"",
            },
            code:null,
            cardZShow:false,
            cardFShow:false,
            front:{
                idCard:"",
                address:"",
                birth:"",
                realName:"",
                sex:"",
                nation:"",
                pinyin:""
            },
            back:{
                expireDate: "",
                signDate: "",
                signOffice: ""
            },
            loading:false
            
        }
    },
    computed:{
        StepsPageList(){
            return this.StepsPage()
        },
        user_fill_list(){
            return this.user_fill()
        },
        color(){
            return fff
        },
        langSuff(){
            return  this.$store.state.langSuff
        },
        cardpor(){
            return [
                {
                    title_zh:this.$t('mainlandCard.index.5636kbucok00'),
                    title_en:this.$t('mainlandCard.index.5636kbucok00'),
                    title_tc:this.$t('mainlandCard.index.5636kbucok00'),
                    is_require:1,
                    type:"input",
                    name:"realName",
                },
                {
                    title_zh:this.$t('mainlandCard.index.5636kbucoso0'),
                    title_en:this.$t('mainlandCard.index.5636kbucoso0'),
                    title_tc:this.$t('mainlandCard.index.5636kbucoso0'),
                    is_require:1,
                    type:"input",
                    name:"pinyin"
                },
                {
                    title_zh:this.$t('mainlandCard.index.5636kbucp0w0'),
                    title_en:this.$t('mainlandCard.index.5636kbucp0w0'),
                    title_tc:this.$t('mainlandCard.index.5636kbucp0w0'),
                    is_require:1,
                    type:"input",
                    name:"sex"

                },
                {
                    title_zh:this.$t('mainlandCard.index.5636kbucp900'),
                    title_en:this.$t('mainlandCard.index.5636kbucp900'),
                    title_tc:this.$t('mainlandCard.index.5636kbucp900'),
                    is_require:1,
                    type:"input",
                    name:"nation"

                },
                {
                    title_zh:this.$t('mainlandCard.index.5636kbucphs0'),
                    title_en:this.$t('mainlandCard.index.5636kbucphs0'),
                    title_tc:this.$t('mainlandCard.index.5636kbucphs0'),
                    is_require:1,
                    type:"input",
                    name:"birth"

                },
                {
                    title_zh:this.$t('mainlandCard.index.5636kbucpqo0'),
                    title_en:this.$t('mainlandCard.index.5636kbucpqo0'),
                    title_tc:this.$t('mainlandCard.index.5636kbucpqo0'),
                    is_require:1,
                    type:"input",
                    name:"idCard",
                    
                },
                {
                    title_zh:this.$t('mainlandCard.index.5636kbucpz80'),
                    title_en:this.$t('mainlandCard.index.5636kbucpz80'),
                    title_tc:this.$t('mainlandCard.index.5636kbucpz80'),
                    is_require:1,
                    type:"input",
                    name:"address"
                }
            ]
        },
        cardSide(){
            return [
                {
                    title_zh:this.$t('mainlandCard.index.5636kbucq7o0'),
                    title_en:this.$t('mainlandCard.index.5636kbucq7o0'),
                    title_tc:this.$t('mainlandCard.index.5636kbucq7o0'),
                    is_require:1,
                    type:"input",
                    name:"signOffice"
                },
                {
                    title_zh:this.$t('mainlandCard.index.5636kbucqfk0'),
                    title_en:this.$t('mainlandCard.index.5636kbucqfk0'),
                    title_tc:this.$t('mainlandCard.index.5636kbucqfk0'),
                    is_require:1,
                    type:"input",
                    name:"signDate"
                },
                {
                    title_zh:this.$t('mainlandCard.index.5636kbucqnw0'),
                    title_en:this.$t('mainlandCard.index.5636kbucqnw0'),
                    title_tc:this.$t('mainlandCard.index.5636kbucqnw0'),
                    is_require:1,
                    type:"input",
                    name:"expireDate"
                },
            ]
        }
    },
    mounted(){
       
    },
    methods:{
        afterRead(item){
            this.cardZShow=true;
            this.uoloadImg('front',item.file,'cardZShow','frontImg')
        },
         afterReadF(item){
             this.cardFShow=true;
            this.uoloadImg('back',item.file,'cardFShow','backImg')
        },
        submit(){
            if(!this.form.frontImg){
                this.$toast(this.$t('login.index.5638tdeew440')+this.$t('mainlandCard.index.56bqm2wdat00'));
                return false
            }
            if(!this.form.backImg){
                this.$toast(this.$t('login.index.5638tdeew440')+this.$t('mainlandCard.index.56bqm2wdduk0'));
                return false
            }
            this.$refs.form.submit()
        },
        submitList(){
            this.loading=true;
            var { curr_id } =  this.StepsPageList;
            var obj = Object.assign({}, { pageId:curr_id , fields :Object.assign({},this.form,this.front,this.back)  })
            submitList(obj)
            .then(res=>{
                this.loading=false;
                if(res.code==1){
                    this.$nextPage({pageId:this.StepsPageList.next_id})
                }else{
                    this.$toast(res.msg)
                }
            })
        },


        uoloadImg(type,file,show,url){
            var formData = new FormData(); //构造一个 FormData，把后台需要发送的参数添加
        　　formData.append('file',file); //接口需要传的参数
        　　formData.append('marker','1'); //接口需要传的参数
            uploads(formData)
            .then(res=>{
                if(res.code==1){
                    this.analyseList({file:res.data.url,type:type},show,type,url)
                }
            })
        },
        analyseList(obj,show,list,url){
             var formData = new FormData(); //构造一个 FormData，把后台需要发送的参数添加
        　　formData.append('file',obj.file); //接口需要传的参数
        　　formData.append('type',obj.type); //接口需要传的参数
            analyse(formData)
            .then(res=>{
                if(res.code==1){
                    this.form[url] = obj.file
                    this[show] = false;
                    this[list] = Object.assign({},this[list],res.data)
                }else{
                    this.$toast(res.msg)
                    this[show] = false;
                }

            })

        }
        
        
    },
    watch:{
        user_fill_list(list){
            var  { frontImg , backImg  , idCard,address,birth,realName,sex,nation,pinyin  , expireDate,signDate,signOffice } =  list;
            this.form = { frontImg , backImg}
            this.front={idCard,address,birth,realName,sex,nation,pinyin}
            this.back={expireDate,signDate,signOffice}
        }
    }
}
</script>
<style lang="less" scoped>
    .cardList{
        .between;
        padding-top: 0.2rem;
        li{
            width: 47%;
            background: @grey;
            height: 2.8rem;
            padding:0.35rem 0.5rem 0.95rem;
            border-radius:3px;
            position: relative;
            overflow: hidden;
            .por{
                width: 100%;
                height: 100%;
                overflow: hidden;
                img{
                    width: 100%;
                    height: 100%;
                    object-fit: contain;
                }
            }
            .cardBT{
                border-radius: 3px;
                background: @btnColor;
                height: 0.6rem;
                text-align: center;
                line-height: 0.6rem;
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                color: @fff;
                font-size: 0.26rem;
            }
            .van-loading{
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.5);
                z-index: 2;
                position: absolute;
                top:0;
                left: 0;
                .center;
            }
        }
        // li::after{
        //     content: '';
        //     width: 100%;
        //     height: 100%;
        //     background: rgba(0, 0, 0, 0.5);
        //     z-index: 2;
        //     position: absolute;
        //     top:0;
        //     left: 0;
        //     .center;
        // }

    }
    .card{
        display: none;
    }
    .card.on{
        display: block;
    }
    .errsfz{
        padding:0.9rem 0 0.7rem;
        font-size: 0.26rem;
        line-height: 0.36rem;
        color: @sizeColor;
        h2{
           padding-bottom: 0.2rem;
        }
        p{
            span{
                color: @btnColor;
            }
        }
        img{
            margin-top: 0.35rem;
            width: 100%;
        }
    }
    .errsfz.on{
        display: none;
    }
</style>